<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control"  content="no-transform">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>B币支付</title>
    <link href="/statics/view/css/app_payment.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body{
            background: #f1f1f1;
            margin: 0;
            padding:0;
            font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
        }

        *{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .panel-wrap{
            background: #FFFFFF;
            border-bottom: 1px solid #dedede;
            border-top: 1px solid #dedede;
            margin-bottom: 20px;
            padding: 15px;
        }

        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }
        .form-control {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .btn-primary {
            background: #ff6600;
        }

        /* 费用提示*/
        .pay-header{
            text-align: center;
            padding: 40px 15px;
        }
        .pay-header h3{
            margin: 0;
            font-size: 36px;
            color: #ff6600;
        }
        .pay-header p{
            color: #888;
            padding: 8px;
        }

    </style>
</head>
<body>
<div class="container" id="pay">
     <div class="row panel-wrap pay-header">
         <h3>100B币</h3>
         <p>小米手环购买</p>
     </div>
     <h3>手机验证</h3>
    <div class="row panel-wrap">
        <form action="" onsubmit="return paymentValidate();">
            <div class="form-group">
                <label>手机号</label>
                <input type="text" class="form-control"  placeholder="平台注册账户">
            </div>
            <div class="form-group">
                <label>验证码</label>
                <input type="text" class="form-control" placeholder="验证码">
                <a href="" style="padding: 5px 0;" id="get_sms_code">获取验证码</a>
            </div>
            <div class="form-group">
                <a href="" class="btn btn-primary" style="width: 100%;color: #FFFFFF;">B币付款</a>
            </div>
            <div class="form-group">
                <input type="checkbox" checked="checked"/>
                <a href="">B币支付协议</a>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="/statics/jquery/jquery.js"></script>
<script type="text/javascript" src="/statics/layer.m/layer.m.js"></script>
<script type="text/javascript">
    $(function(){
        $("#get_sms_code").click(function(){
            layer.open({
                type: 2,
                content: '发送中'
            });
            $.ajax({
                url: "",
                type: "POST",
                data: {
                    username: "",
                },
                dataType: "json",
                cache: false,
                success: function(message) {

                    layer.open({
                        content: '您好',
                        time: 2
                    });
                }
            });
            layer.closeAll('loading');
            return false;
        });
    });

    function paymentValidate(){
        layer.open({
            title: '提示',
            content: '确定支付吗？',
            btn: ['确定', '取消'],
            yes: function(index){

            }
        });
        return false;
    }

</script>
</body>
</html>